<template>
  <div class="openclass-live">
    <div class="live-content">
      <div class="live-banner-bgc">
        <div class="class-live-banner maxW">
          <div class="live-banner-tit">
            <i class="el-icon-arrow-left" @click="goback()"></i>
            <strong :title="videoTitle">{{ videoTitle }}</strong>
          </div>
        </div>
        <div class="video-play-cont maxW">
          <div class="video-box" v-if="videoFlag">
            <trailPlayer
              v-if="courseData.trialSrc"
              @dialogFlag="dialogTigger"
              :videoOptions="courseData"
            ></trailPlayer>
          </div>
          <div class="video-box" v-else>
            <div
              class="fengmiantupain"
              v-if="is_tryPlayer == 2 && !courseData.play_url"
            >
              <p class="anniu" @click="getVideoDta"></p>
              <img :src="fengmiantupain" :onerror="errorImg" alt="默认封面" />
              <span class="mask" v-if="debounceFlag"></span>
            </div>
            <player
              v-if="courseData.play_url"
              :videoOptions="courseData"
            ></player>
          </div>
        </div>
      </div>
    </div>

    <el-dialog
      class="strailtip"
      :visible.sync="centerDialogVisible"
      width="400px"
      center
    >
      <p style="text-align: center">试看结束，是否观看正式课程?</p>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" size="small" @click="playFormal"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>
<script>
import player from "./openclass-player";
import trailPlayer from "./trailPlayer";
export default {
  components: {
    player,
    trailPlayer,
  },
  props: {
    userData: {},
  },
  data() {
    return {
      videoid: this.$route.query.id,
      videoTitle: "",
      //课程介绍 / 讲师介绍：
      courseData: {
        trialSrc: "",
        play_url: "",
        type: "application/x-mpegURL",
      },

      videoFlag: false,
      is_tryPlayer: 2,
      centerDialogVisible: false,
      debounceFlag: true,
      errorImg:
        'this.src="' +
        require("./../../../assets/images/fengmian-tupian.png") +
        '"',
    };
  },
  computed: {
    user_login_id() {
      return this.userData.userInfo.id ? this.userData.userInfo.id : 0;
    },
    fengmiantupain() {
      return this.BASE_URL + this.$route.params.pic;
    },
  },
  created() {
    this.getAppInfo();
    this.getIntroduction();
  },
  methods: {
    getVideoDta() {
      // 防抖
      if (this.debounceFlag) {
        this.getVideoPlayUrl();
        this.debounceFlag = false;
      }
    },
    getAppInfo() {
      const success = (res) => {
        this.videoFlag = res.data.is_try == 1 ? true : false;
        this.is_tryPlayer = res.data.is_try;
        if (res.data.is_try == 1) {
          this.getTrySeeVideoUrl();
        }
      };
      this.$ajax.get("/api/xkvideo/app_config", { func: { success } });
    },
    // 试看
    dialogTigger(val) {
      this.centerDialogVisible = val;
    },
    playFormal() {
      // 若开启试看模式，则点击确定后再请求正式观看视频
      this.videoFlag = false;
      this.centerDialogVisible = false;
      if (this.debounceFlag) {
        this.getVideoPlayUrl();
        this.debounceFlag = false;
      }
    },
    getTrySeeVideoUrl() {
      const success = (res) => {
        if (res.data.ext == "mp4") {
          this.courseData.type = "video/mp4";
        } else {
          this.courseData.type = "application/x-mpegURL";
        }
        this.courseData.trialSrc = res.data.play_url;
      };
      const fail = (res) => {
        this.$message.error(res.msg);
      };
      let params = {
        xk_id: this.videoid,
        user_id: this.user_login_id,
      };
      this.$ajax.get("/api/xkvideo/preview_video_playurl", {
        params,
        func: { success, fail },
      });
    },
    getVideoPlayUrl() {
      let success = (data) => {
        if (data.data.ext == "mp4") {
          this.courseData.type = "video/mp4";
        } else {
          this.courseData.type = "application/x-mpegURL";
        }
        this.courseData.play_url = data.data.play_url;
      };
      let fail = (res) => {
        this.$message.error(res.msg);
      };
      this.$ajax({
        url: "/api/xkvideo/video_playurl",
        method: "get",
        params: {
          xk_id: this.videoid,
          userid: this.user_login_id,
        },
        func: {
          success,
          fail,
        },
      });
    },
    getIntroduction() {
      let success = (data) => {
        this.videoTitle = data.data.videoTitle;
      };
      this.$ajax.get("/api/xkvideo/video", {
        params: { xk_id: this.videoid },
        func: { success },
      });
    },
    goback() {
      this.$router.push("/home/xkvideo");
    },
  },
};
</script>
<style lang="scss">
@import url("../../../assets/css/video.css");

.strailtip {
  margin-top: 30vh;
}

.transcoding {
  position: relative;
  width: 56px;
  cursor: pointer;

  > dl {
    position: absolute;
    bottom: 0;
    width: 100%;

    &:hover dd {
      display: block;
    }

    > dd {
      display: none;
      height: 42px;
      line-height: 42px;
      text-align: center;
      color: #fff;
      background: rgba(0, 0, 0, 0.4);

      &:hover {
        font-weight: 600;
        background: rgba(0, 0, 0, 0.8);
      }
    }

    > .acitve {
      height: 42px;
      line-height: 42px;
      text-align: center;
      color: #fff;
      // font-weight: 600;
      background: transparent;
    }
  }
}

.live-banner-bgc {
  position: relative;
  background-image: url("../../../assets/images/bgc.png") !important;
  background-size: cover;
  width: 100%;
  overflow: hidden;
}

.class-live-banner {
  height: 50px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .live-banner-tit {
    font-size: 16px;
    line-height: 16px;
    cursor: pointer;
    i {
      font-weight: 600;
      color: #a0bed2;
      margin-right: 10px;
    }
    strong {
      display: inline-block;
      width: 1000px;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #fff;
    }
  }
  .live-banner-r {
    line-height: 20px;
    font-size: 14px;
    color: #b1bdc2;
  }
}

.video-play-cont {
  margin-bottom: 83px;
}

.video-box {
  background-color: rgba(43, 51, 63, 0.7);
  .videoMarkPlayer-dimensions.vjs-fluid {
    padding-top: 56%;
  }

  height: 674px;
  position: relative;
}

.fengmiantupain {
  width: 100%;
  height: 100%;
  position: relative;
  img {
    width: 100%;
    height: 100%;
  }
  .anniu {
    cursor: pointer;
    position: absolute;
    top: calc(50% - 86px);
    left: calc(50% - 60px);
    width: 80px;
    height: 80px;
    border: 4px solid #fff;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, 0.2);
    z-index: 2;
  }
  .anniu::after {
    content: "";
    position: absolute;
    top: calc(50% - 10px);
    left: calc(50% - 5px);
    width: 0px;
    height: 0px;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
    border-right: 10px solid transparent;
    border-left: 15px solid #fff;
  }
  .mask {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.2);
    z-index: 1;
    transition: all 1s linear;
  }
}

.i_dataDownload_t {
  line-height: 60px;
  height: 60px;
  font-size: 14px;
}

.saw-btn {
  margin: 0 4px 20px 0;
  padding: 0;

  .r-avatar-img {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #ccc;
    overflow: hidden;
  }
}

.saw-btn:nth-of-type(5n) {
  margin: 0 0 20px 0;
}

.i_userIn {
  .i_userIn_txt {
    padding: 25px 15px 30px;

    .avatar-pic {
      width: 60px;
      height: 60px;
      border-radius: 50%;
      background-color: #ccc;
      overflow: hidden;
    }
  }

  .but_Collection02 {
    background-position: -757px -300px;
    width: 40px;
    height: 40px;
  }

  .saw-people-info {
    float: left;
    margin-left: 15px;

    span:nth-of-type(1) {
      display: block;
      font-size: 14px;
      line-height: 24px;
      color: #000000;
    }

    span:nth-of-type(2) {
      display: block;
      font-size: 12px;
      line-height: 24px;
      color: #666666;
    }
  }
}

.i_userIn_icon {
  text-align: center;
  background: #338efc;
  padding: 6px 0;

  i {
    margin: 0 15px;
    cursor: pointer;
  }

  .IsRelation {
    background-position: -757px -300px;
  }

  .NotRelation {
    background-position: -757px -350px;
  }
}

.dataFile {
  padding: 5px 20px;
}

.dataFile {
  span {
    float: left;
    display: block;
    font-size: 14px;
    line-height: 40px;
    width: 72%;
    white-space: nowrap;
    text-overflow: ellipsis;
    overflow: hidden;
  }

  i {
    float: right;
    border-radius: 50%;
    overflow: hidden;
    cursor: pointer;
  }

  i:hover {
    box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
  }
}

.dataFile:hover {
  background: #effaff;
}

.dataFile:hover > span {
  color: #67aed2;
}

.dataFileBG {
  text-align: center;
  padding: 60px 0;
  span {
    font-size: 12px;
    line-height: 65px;
    color: #2f6d8c;
  }
}

.dataUser {
  padding: 10px 25px;
}

.dataUser > a,
.dataUser > div {
  float: left;
  display: block;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  margin: 0 7px 20px 0;
  background: #5cbeb3;
  position: relative;
}

.dataUser > a > img,
.dataUser > div > img {
  border-radius: 50%;
  width: 40px;
  height: 40px;
  vertical-align: top;
  overflow: hidden;
}

.dataUser > a:hover,
.dataUser > div:hover {
  box-shadow: 0 6px 7px 0 rgba(0, 0, 0, 0.1);
}

.dataUser > a:hover .i_userIn,
.dataUser > div:hover .i_userIn {
  opacity: 1;
  visibility: visible;
}

.dataUser > a:nth-of-type(5n),
.dataUser > div:nth-of-type(5n) {
  margin: 0 0 20px 0;
}

.dataFileBG2 {
  padding-top: 50px;
  text-align: center;
  p {
    margin: 20px 0;
    color: #2f6d8c;
  }
}

// live-commont end

.collect_btn {
  display: inline-block;
  width: 16px;
  height: 14px;
  background-image: url("../../../assets/images/ipng.png");
  background-repeat: no-repeat;
  margin-left: 8px;
  cursor: pointer;
  vertical-align: middle;
}

.alr_collect {
  background-position: -470px -782px;
}

.un_collect {
  background-position: -418px -782px;
}

.f-line {
  margin: 0 20px;
}
</style>